<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        .contract_start_wrapper{
            margin: auto auto;
            display: block;
            width: 70%;
            height: 100%;
            font-size: 100%;
        }
        .main-div{
            margin:  1% 1% 0 1%;
            padding: 30% auto;
            width: 98%;
            border: 1px solid;
            border-radius: 4px;
            border-color: darkgrey;
        }
        .em-main{
            margin:auto auto;
            height: 100%;
        }
        .em-body{
            margin: 1% 5% 1%;
            overflow: hidden;
        }

        .em-title-head{
            background-color: #1BA1E2;
            text-align: center;
            font-size: 120%;
            padding: 1%;
            margin-bottom: 3%;
            color: white;
        }
        .em-body-info{
            background-color: #F5F5F5;
            border: 1px;
            border-radius: 4px;
            padding: 3% 0;
        }
        .em-notice{
            background-color: white;
            margin: 0 3%;
            padding: 10px;
            border-radius: 4px;
        }
        .em_mainbody_info{
            background-color: white;
            padding: 1%;
            margin: 1% 3%;
        }

        .em-span{
            padding:1% 2%;
        }

        .em-title-blue{
            color: blue;
        }

        .em-textarea{
            width: 100%;
            overflow: hidden;
            resize: none;
            height: 80%;
        }
        .em-bottom{
            text-align: center;
            padding: 1%;
        }
        .em-button{
            display: inline-block;
            line-height: 50%;
            white-space: nowrap;
            /*cursor: pointer;*/
            /* background: #FFF; */
            border: 1px solid #DCDFE6;
            color: white;
            /*-webkit-appearance: none;*/
            text-align: center;
            /*-webkit-box-sizing: border-box;*/
            box-sizing: border-box;/
            /*outline: 0;*/
        margin: 0;
            /*-webkit-transition: .1s;*/
            /*transition: .1s;*/
            font-weight: 500;
            /*-ms-user-select: none;*/
            padding: 1.5% 3%;
            font-size: 100%;
            border-radius: 4px;
            background-color: #55BFE0;
        }
        .em-bottom-label{
            text-align: center;
            font-size: 80%;
        }
        .em-sendaddress{
            margin: 0 0 0;
            float: left;
            font-size: 80%;
            width: 60%;
            padding: 0 0 0 75%;
        }
        .footer{
            width: 65%;
            height:10%;
            margin: 3% auto 0 ;
            padding: auto auto;
        }
    </style>
    <title>契約開始メール</title>
</head>
<body>
<div class="contract_start_wrapper">
    <div class="main-div">
        <div class="em-main">
            <div class="em-body">
                <div class="em-title-head">
                    <span><img src={{config('app.url').'/img/style/mail/ecodraft_logo.png'}} width="248" height="60"  alt="エコドラフト" style="color: black" /></span>
                </div>
                <div class="em-body-info">
                    <div class="em-notice">
                        <span class="em-span">エコドラフト契約手続きを進めてください。</span>
                    </div>
                    <div class="em_mainbody_info">
                        <span class="em-span em-title-blue">契約書タイトル</span>
                        <hr>
                        <div class="em_mainbody_info">
                            <div class="em-textarea">
                                いつもエコドラフトをご利用いただきまして誠にありがとうございます。<br/><br/>
                                現在進行中の契約お手続きについてですが、必要な情報をご入力いただき、手続きを進めてください。<br/><br/>
                                <p>今後とも、エコドラフトをご利用くださいますようよろしくお願い申し上げます。</p>
                                <p>＊本メールは送信専用です。このままご返信頂いてもお答えできませんのでご了承ください。</p>
                            </div>
                            <div class="em-bottom">
                                <a class="em-button" href={{$url}}>情報を入力する（{{$value}}）</a>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <p style="font-size: 10px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8);">本メールは送信専用ですので、ご返信いただいてもお答えできません。<br />
                            本メールに心当たりがない場合は、他の方がメールアドレスを誤入力してしまった可能性がございます。<br />
                            万一このメールが誤って着信したものである場合は、すべてのデータを削除・破棄してください。<br />
                            誤って着信したメールを、自己のために利用したり、第三者に開示することを固く禁止します。</p>
                        <div class="em-sendaddress">
                            <div>トライシクル株式会社</div>
                            <div>東京都品川区南大井6-17-17 FINEビル4F</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{--<table border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
<tbody>
<tr>
    <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
        <table width="100%" border="0" cellpadding="5" cellspacing="0" >
            <tbody>
            <tr>
                <td>
                    <p style="margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br>　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的开发者：<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                    <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;"><br>　　　　　　　　　　　　　　　　　　　　　　　　　“xxx”在此次的‘网络友好度测试’评级：<span style="color:#F44336;">4颗星</span>（最高5颗星）。<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                    <button style="">{{$value}}</button>
                </td>
            </tr>
            </tbody>
        </table>
    </td>
</tr>

</tbody>
</table>--}}
</body>
<script>
</script>
</html>